<script setup lang="ts">

import {onBeforeMount, onBeforeUpdate, onMounted, onUpdated, ref} from "vue";

  const count = ref(1)
  function countAdd() {
    count.value++
  }

  // 生命周期钩子函数

  // 挂载
  // 挂载之前
  onBeforeMount( () => {
    console.log("挂载前：count", count.value)
    console.log("挂载前：btn01" , document.getElementById("btn01"))
  })

  // 挂载完成之后
  onMounted(() => {
    console.log("挂载完成：count", count.value)
    console.log("挂载完成：btn01" , document.getElementById("btn01"))
  })

  // 更新
  // 更新之前
  onBeforeUpdate(() => {
    // 点下面的按钮会触发
    console.log("更新前：count", count.value)
    console.log("更新前: btn01内容" , document.getElementById("btn01").innerHTML)
  })

  // 更新完成之后
  onUpdated(() => {
    // 点下面的按钮会触发
    console.log("更新完成：count", count.value)
    console.log("更新完成: btn01内容" , document.getElementById("btn01").innerHTML)
  })


  // 经典的使用场景
</script>

<template>

  <button id="btn01" @click="countAdd">点 {{count}}</button>
</template>

<style scoped>

</style>